<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script>
    //常量路由:全部用户都可以访问到的路由
    let constRoute = [
      {
        //登录
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login',
        meta: {
          title: '登录',//菜单标题
          hidden: true,//代表路由标题在菜单中是否隐藏  true:隐藏 false:不隐藏
          icon: "Promotion",//菜单文字左侧的图标,支持element-plus全部图标
        }
      }
      ,
      {
        //登录成功以后展示数据的路由
        path: '/',
        component: () => import('@/layout/index.vue'),
        name: 'layout',
        meta: {
          title: '',
          hidden: false,
          icon: ''
        },
        redirect: '/home',
        children: [
          {
            path: '/home',
            component: () => import('@/views/home/index.vue'),
            meta: {
              title: '首页',
              hidden: false,
              icon: 'HomeFilled'
            }
          }
        ]
      },
      {
        //404
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404',
        meta: {
          title: '404',
          hidden: true,
          icon: 'DocumentDelete'
        }
      },
      {
        path: '/screen',
        component: () => import('@/views/screen/index.vue'),
        name: 'Screen',
        meta: {
          hidden: false,
          title: '数据大屏',
          icon: 'Platform'
        }
      }
    ]

    //异步路由:用户的的人有这个路由,有的人没有[动态追加异步路由]
    let asnycRoute = [
      {
        path: '/acl',
        component: () => import('@/layout/index.vue'),
        name: 'Acl',
        meta: {
          title: '权限管理',
          icon: 'Lock'
        },
        redirect: '/acl/user',
        children: [
          {
            path: '/acl/user',
            component: () => import('@/views/acl/user/index.vue'),
            name: 'User',
            meta: {
              title: '用户管理',
              icon: 'User'
            }
          },
          {
            path: '/acl/role',
            component: () => import('@/views/acl/role/index.vue'),
            name: 'Role',
            meta: {
              title: '角色管理',
              icon: 'UserFilled'
            }
          },
          {
            path: '/acl/permission',
            component: () => import('@/views/acl/permission/index.vue'),
            name: 'Permission',
            meta: {
              title: '菜单管理',
              icon: 'Monitor'
            }
          }
        ]
      }
      ,
      {
        path: '/product',
        component: () => import('@/layout/index.vue'),
        name: 'Product',
        meta: {
          title: '商品管理',
          icon: 'Goods',
        },
        redirect: '/product/trademark',
        children: [
          {
            path: '/product/trademark',
            component: () => import('@/views/product/trademark/index.vue'),
            name: "Trademark",
            meta: {
              title: '品牌管理',
              icon: 'ShoppingCartFull',
            }
          },
          {
            path: '/product/attr',
            component: () => import('@/views/product/attr/index.vue'),
            name: "Attr",
            meta: {
              title: '属性管理',
              icon: 'ChromeFilled',
            }
          },
          {
            path: '/product/spu',
            component: () => import('@/views/product/spu/index.vue'),
            name: "Spu",
            meta: {
              title: 'SPU管理',
              icon: 'Calendar',
            }
          },
          {
            path: '/product/sku',
            component: () => import('@/views/product/sku/index.vue'),
            name: "Sku",
            meta: {
              title: 'SKU管理',
              icon: 'Orange',
            }
          },
        ]
      }
    ]

    //任意路由
    let anyRoute = {
      //任意路由
      path: '/:pathMatch(.*)*',
      redirect: '/404',
      name: 'Any',
      meta: {
        title: '任意路由',
        hidden: true,
        icon: 'DataLine'
      }
    }

    let guigu333 = []
    console.log(asnycRoute);
    let a = []
    function filterNode(asnycRouteData, routers) {

      asnycRouteData.forEach(element => {

        if (routers.includes(element.name)) {
          a.push(element);
        }

        if (element.children == undefined) {
          return;
        } else {
          filterNode(element.children, routers);
        }
      });
      return a;
    }

    let a1 = filterNode(asnycRoute, guigu333);

    console.log(a1);

    console.log([...a1, ...constRoute, anyRoute]);
    console.log(asnycRoute);
  </script>
</body>

</html>